package com.csw.compose.ui.module.animation

import androidx.compose.animation.Animatable
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Preview
@Composable
fun MultiAnimationPagePreview() {
    BasePage({}, "多动画") {
        MultiAnimationPage()
    }
}

class MultiAnimationPageData {
    companion object : Destination("MultiAnimationPage")
}

@Composable
fun MultiAnimationPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        BodyText("在同一组件上顺序执行多个动画")
        LargeSpacer()
        val background = remember { Animatable(Color.Green) }
        val alpha = remember { androidx.compose.animation.core.Animatable(0.1f) }
        LaunchedEffect(Unit) {
            alpha.animateTo(1f, tween(3000))
            background.animateTo(Color.Blue, tween(2000))
        }
        Box(Modifier
            .size(60.dp)
            .drawBehind {
                drawRect(background.value, alpha = alpha.value)
            }
        )
        NormalSpacer()
        UlItem("Animatable")
        LabelText("此类用于实现基础的动画，它有两个同名的全局方法用于创建浮点型和Color动画")
        OlItem(1, "animateTo")
        LabelText("此方法用于指定动画的目标数值，它是一个挂起方法，需在协程中执行，动画过程中会更新value，在组件中直接读取即可")

        LargeSpacer()
        BodyText("在同一组件上同时执行多个动画")
        LargeSpacer()
        val background2 = remember { Animatable(Color.Green) }
        val alpha2 = remember { androidx.compose.animation.core.Animatable(0.1f) }
        LaunchedEffect(Unit) {
            launch { alpha2.animateTo(1f, tween(3000)) }
            launch { background2.animateTo(Color.Blue, tween(2000)) }
        }
        Box(Modifier
            .size(60.dp)
            .drawBehind {
                drawRect(background2.value, alpha = alpha2.value)
            }
        )
        LabelText("显然我们通过协程并发执行任务也可以实现同时修改多个动画状态值")

        LargeSpacer()
        var state by remember { mutableIntStateOf(0) }
        val transition = updateTransition(state)
        val background3 by transition.animateColor({ tween(2000) }) {
            when (it) {
                0 -> Color.Green
                else -> Color.Blue
            }
        }
        val alpha3 by transition.animateFloat({ tween(2000) }) {
            when (it) {
                0 -> 0.1f
                else -> 1f
            }
        }
        Box(Modifier
            .size(60.dp)
            .drawBehind {
                drawRect(background3, alpha = alpha3)
            }
        )
        LaunchedEffect(Unit) {
            state = 1
        }
        NormalSpacer()
        UlItem("updateTransition")
        LabelText("更新过渡，它通过绑定状态类型，可由开发者根据不同状态返回不同的不同阶段的值，从而实现在不同状态的切换动画")
        OlItem(1, "animateXxx")
        LabelText("该对象基于animateValue扩展了诸多方法，如animateColor、animateFloat等")


    }
}